<template>
  <div class="app-menu">
    <header class="app-menu__hd">
      <RouterLink class="app-menu__hd-title" to="/">FaContract</RouterLink>
    </header>
    <nav class="app-menu__nav">
      <RouterLink class="nav-link" to="/contract/view">文档查看</RouterLink>
      <RouterLink class="nav-link" to="/widget/status">控件状态</RouterLink>
      <RouterLink class="nav-link" to="/widget/set">控件设置</RouterLink>
      <RouterLink class="nav-link" to="/contract/fill">合同填写</RouterLink>
      <RouterLink class="nav-link" to="/contract/sign">合同签署</RouterLink>
    </nav>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'AppMenu',

  setup() {
    return {}
  }
})
</script>

<style lang="scss" scoped>
$menu-width: 140px;
$hd-height: 48px;

.link {
  color: $color-text-regular;
  text-decoration: none;
  transition: color 0.2s ease-in-out;

  &:hover {
    color: $color-primary;
  }

  &:active,
  &.router-link-exact-active {
    color: $color-primary-dark;
  }
}

.app-menu {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: $menu-width;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);

  &__hd {
    height: $hd-height;
    margin: 0;
    text-align: center;
    border-bottom: $border-solid;

    &-title {
      font-weight: 700;
      font-size: 16px;
      line-height: $hd-height;

      @extend .link;
    }
  }

  &__nav {
    flex: 1 1 auto;
    height: calc(100% - $hd-height);
    padding: 16px;
    overflow: auto;
    text-align: center;
    .nav-link {
      display: block;
      margin: 0.5em 0;
      font-size: 14px;
      line-height: 1.5;

      @extend .link;
    }
  }
}
</style>
